M

MLOG

Български

Научете как да използвате service workers за създаване на бързи и надеждни офлайн-първи уеб приложения, ангажиращи потребители по целия свят.

Service Workers: Изграждане на офлайн-първи уеб приложения

В днешния свят потребителите очакват уеб приложенията да бъдат бързи, надеждни и достъпни, дори когато мрежовата свързаност е ограничена или липсва. Тук се намесва концепцията за дизайн „офлайн-първи“. Service workers са мощна технология, която позволява на разработчиците да създават уеб приложения, които работят безпроблемно офлайн, осигурявайки превъзходно потребителско изживяване.

Какво представляват Service Workers?

Service worker е JavaScript файл, който работи във фонов режим, отделно от основната нишка на браузъра. Той действа като прокси между уеб приложението и мрежата, като прихваща мрежови заявки и управлява кеширането. Service workers могат да изпълняват задачи като:

Важно е да се отбележи, че service workers се контролират от браузъра, а не от уеб страницата. Това им позволява да функционират дори когато потребителят е затворил раздела или прозореца на браузъра.

Защо „офлайн-първи“?

Изграждането на офлайн-първи уеб приложение предлага множество предимства:

Как работят Service Workers

Жизненият цикъл на service worker се състои от няколко етапа:

  1. Регистрация: Service worker се регистрира в браузъра, като се посочва обхватът на приложението, което ще контролира.
  2. Инсталиране: Service worker се инсталира, като през това време обикновено кешира статични ресурси.
  3. Активиране: Service worker се активира и поема контрола над уеб приложението. Това може да включва премахване на стари service workers и почистване на стари кешове.
  4. В покой: Service worker остава в покой, изчаквайки мрежови заявки или други събития.
  5. Извличане (Fetch): Когато се направи мрежова заявка, service worker я прихваща и може или да сервира кеширано съдържание, или да извлече ресурса от мрежата.

Внедряване на „офлайн-първи“ със Service Workers: Ръководство стъпка по стъпка

Ето един основен пример за това как да внедрите офлайн-първи функционалност с помощта на service workers:

Стъпка 1: Регистрирайте Service Worker

Във вашия основен JavaScript файл (напр. `app.js`): 


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker е регистриран с обхват:', registration.scope);
    })
    .catch(function(error) {
      console.log('Регистрацията на Service Worker е неуспешна:', error);
    });
}

Този код проверява дали браузърът поддържа service workers и регистрира файла `service-worker.js`. Обхватът дефинира кои URL адреси ще контролира service worker.

Стъпка 2: Създайте файла на Service Worker (service-worker.js)

Създайте файл с име `service-worker.js` със следния код:


const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/images/logo.png'
];

self.addEventListener('install', function(event) {
  // Изпълнение на стъпките за инсталиране
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Кешът е отворен');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Попадение в кеша – връщане на отговор
        if (response) {
          return response;
        }

        // ВАЖНО: Клонирайте заявката.
        // Заявката е поток и може да бъде консумирана само веднъж. Тъй като я консумираме
        // веднъж от кеша и веднъж от браузъра за извличане, трябва да клонираме отговора.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Проверете дали сме получили валиден отговор
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // ВАЖНО: Клонирайте отговора.
            // Отговорът е поток и трябва да бъде консумиран само веднъж.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Този код извършва следното:

Стъпка 3: Тествайте своята офлайн функционалност

За да тествате своята офлайн функционалност, можете да използвате инструментите за разработчици на браузъра. В Chrome отворете DevTools, отидете в раздела „Application“ и изберете „Service Workers“. След това можете да симулирате офлайн режим, като поставите отметка в полето „Offline“.

Разширени техники със Service Workers

След като имате основни познания за service workers, можете да проучите по-напреднали техники за подобряване на вашето офлайн-първи приложение:

Стратегии за кеширане

Има няколко стратегии за кеширане, които можете да използвате, в зависимост от типа на ресурса и изискванията на вашето приложение:

Изборът на правилната стратегия за кеширане зависи от конкретния ресурс и изискванията на вашето приложение. Например статични ресурси като изображения и CSS файлове често се сервират най-добре със стратегията „Първо кеш“, докато динамичното съдържание може да се възползва от стратегията „Първо мрежа“ или „Кеш, след това мрежа“.

Фонова синхронизация

Фоновата синхронизация ви позволява да отложите задачи, докато потребителят има стабилна мрежова връзка. Това е полезно за задачи като изпращане на формуляри или качване на файлове. Например потребител в отдалечен район на Индонезия може да попълни формуляр, докато е офлайн. След това service worker може да изчака, докато се появи връзка, преди да изпрати данните.

Push известия

Service workers могат да се използват за изпращане на push известия до потребителите, дори когато приложението не е отворено. Това може да се използва за повторно ангажиране на потребителите и предоставяне на навременни актуализации. Представете си приложение за новини, което предоставя извънредни новини на потребителите в реално време, независимо дали приложението е активно.

Workbox

Workbox е колекция от JavaScript библиотеки, които улесняват изграждането на service workers. Той предоставя абстракции за често срещани задачи като кеширане, маршрутизиране и фонова синхронизация. Използването на Workbox може да опрости кода на вашия service worker и да го направи по-лесен за поддръжка. Много компании вече използват Workbox като стандартен компонент при разработването на PWA и офлайн-първи преживявания.

Съображения за глобална аудитория

Когато създавате офлайн-първи уеб приложения за глобална аудитория, е важно да вземете предвид следните фактори:

Примери за офлайн-първи приложения

Няколко популярни уеб приложения успешно са внедрили офлайн-първи функционалност с помощта на service workers:

Заключение

Service workers са мощен инструмент за изграждане на офлайн-първи уеб приложения, които са бързи, надеждни и ангажиращи. Чрез кеширане на ресурси, прихващане на мрежови заявки и обработка на фонови задачи, service workers могат да осигурят превъзходно потребителско изживяване, дори когато мрежовата свързаност е ограничена или липсва. Тъй като достъпът до мрежата остава непостоянен по целия свят, фокусирането върху офлайн-първи дизайни е от решаващо значение за осигуряването на справедлив достъп до информация и услуги в мрежата.

Като следвате стъпките, описани в това ръководство, и вземете предвид споменатите по-горе фактори, можете да създадете уеб приложения, които работят безпроблемно офлайн и предоставят приятно изживяване за потребителите по целия свят. Прегърнете силата на service workers и изградете бъдещето на уеб – бъдеще, в което уебът е достъпен за всички, навсякъде, независимо от тяхната мрежова връзка.